<!DOCTYPE HTML>
<html>

<head>
    <title>任务管理器</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Content-Type" content="text/html, IE=edge, chrome=1, charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=0，user-scalable=yes">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <link rel="stylesheet" href="static/index.css">
    <link rel="stylesheet" href="css/styles.css">

    <script type="text/javascript" src="static/jquery.min.js"></script>
    <script type="text/javascript" src="js/api.js"></script>
    <script type="text/javascript" src="static/vue.js"></script>
    <script type="text/javascript" src="static/index.js"></script>
</head>

<body>
    <div id="window">
        <div class="title">
            <span >概念任务管理器 - 持续更新中</span>
            <div class="btn-control">
                <button class="btn-min" onclick="win_min()"></button>
                <button class="btn-max" onclick="win_max()"></button>
                <button class="btn-close" onclick="win_close()"></button>
            </div>
        </div>

        <div class="btn-control-a">
            <button style="margin-right:8px;outline:none;" onclick="win_run()">
                <li class="el-icon-plus" style="margin-right:6px;font-size:13px"></li>创建进程
            </button>
            <el-dropdown size="mini" trigger="click" @command="menu_click">
                <button>
                    <li class="el-icon-more" style="transform:rotate(90deg);font-size:13px"></li>
                </button>
                <el-dropdown-menu slot="dropdown" class="menu-a">
                    <el-dropdown-item command="a">立即刷新</el-dropdown-item>
                    <el-dropdown-item command="b">更新速度</el-dropdown-item>
                    <el-dropdown-item command="c">全部展开</el-dropdown-item>
                    <el-dropdown-item command="d">全部折叠</el-dropdown-item>
                    <el-dropdown-item command="e" id="ui-mode">深色模式</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <nav>
            <el-tabs value="1" @tab-click="nav_click">
                <el-tab-pane label="应用" name="1">
                    <div class="process" >
                        <template>
                            <el-table :data="process" height="458" border highlight-current-row>
                                <el-table-column prop="name" label="名称" width="190" sortable>
                                    <template slot-scope="scope">
                                        <div class="zd_name" :tab="scope.row.tab">
                                            <img  :src="scope.row.icon == '' ? 'img/icon/null.png' : scope.row.icon">
                                            <span>{{scope.row.name}}</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="pid" label="PID" width="80" sortable></el-table-column>
                                <el-table-column prop="state" label="状态" width="130" sortable></el-table-column>
                                <el-table-column prop="cpu" label="CPU" sortable></el-table-column>
                                <el-table-column prop="ram" label="内存" sortable></el-table-column>
                                <el-table-column prop="disk" label="磁盘" sortable></el-table-column>
                                <el-table-column prop="internet" label="网络" sortable></el-table-column>
                                <el-table-column prop="gpu" label="GPU" sortable></el-table-column>
                            </el-table>
                        </template>
                    </div>
                </el-tab-pane>


                <el-tab-pane label="服务" name="2">
                    <div class="service">
                        <template>
                            <p class="mini_title">考虑到全部加载会影响性能，仅显示前50条服务，剩余服务请到 services.msc 管理</p>
                            <el-table :data="service" height="458" border highlight-current-row>
                                <el-table-column prop="name" label="名称" width="250" sortable>
                                    <template slot-scope="scope">
                                        <div class="zd_name" :tab="scope.row.tab">
                                            <img src="img/icon/null.png">
                                            <span>{{scope.row.name}}</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="pid" label="PID" width="80" sortable></el-table-column>
                                <el-table-column prop="describe" label="描述" width="320" sortable>
                                    <template slot-scope="scope">
                                        <span :title="scope.row.describe">{{scope.row.describe}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="group" label="类别" sortable></el-table-column>
                                <el-table-column prop="state" label="状态" sortable>
                                    <template slot-scope="scope">
                                        <el-switch v-model="scope.row.state" active-color="#1E6CFA" inactive-color="rgba(0, 0, 0, 0.2)"></el-switch>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="性能" name="3">
                    <template>
                        <nav id="v_nav" page="1">
                            <div class="v_item v_sel" name="1">
                                <div class="v_sel2"></div>
                                <div class="v_img"></div>
                                <div class="v_text">
                                    <h3>CPU</h3>
                                    <p>Intel(R) Core(TM) i9-9900K</p>
                                    <p>5.02 GHz  6%</p>
                                </div>

                                
                            </div>

                            <div class="v_item" name="2">
                                <div class="v_sel2"></div>
                                <div class="v_img"></div>
                                <div class="v_text">
                                    <h3>内存</h3>
                                    <p>13.3/31.9 GB</p>
                                    <p>42%</p>
                                </div>
                            </div>

                            <div class="v_item" name="3">
                                <div class="v_sel2"></div>
                                <div class="v_img"></div>
                                <div class="v_text">
                                    <h3>磁盘0 (C:)</h3>
                                    <p>SSD / 512GB</p>
                                    <p>2%</p>
                                </div>
                            </div>

                            <div class="v_item" name="4">
                                <div class="v_sel2"></div>
                                <div class="v_img"></div>
                                <div class="v_text">
                                    <h3>磁盘1 (D: E: F:)</h3>
                                    <p>HHD / 2048GB</p>
                                    <p>2%</p>
                                </div>
                            </div>

                            <div class="v_item" name="5">
                                <div class="v_sel2"></div>
                                <div class="v_img"></div>
                                <div class="v_text">
                                    <h3>Wi-Fi</h3>
                                    <p>WLAN</p>
                                    <p>发送:0.8 / 接收:1.8 kbs</p>
                                </div>
                            </div>

                            <div class="v_item" name="6">
                                <div class="v_sel2"></div>
                                <div class="v_img"></div>
                                <div class="v_text">
                                    <h3>GPU0</h3>
                                    <p>NVIDIA GeForce RTX 3090 Ti</p>
                                    <p>73°C 64%</p>
                                </div>
                            </div>

                            <div class="v_item" name="7">
                                <div class="v_sel2"></div>
                                <div class="v_img"></div>
                                <div class="v_text">
                                    <h3>GPU1</h3>
                                    <p>NVIDIA GeForce RTX 3090 Ti</p>
                                    <p>53°C 10%</p>
                                </div>
                            </div>

                            <div class="v_item" name="8">
                                <div class="v_sel2"></div>
                                <div class="v_img"></div>
                                <div class="v_text">
                                    <h3>GPU2</h3>
                                    <p>NVIDIA GeForce RTX 3090 Ti</p>
                                    <p>89°C 96%</p>
                                </div>
                            </div>
                        </nav>
                </template>
                </el-tab-pane>

                <el-tab-pane label="应用历史记录" name="4">
                    <div class="record">
                        <template>
                            <p class="mini_title">自 2022/01/22 以来，当前用户账户的资源使用情况。</p>
                            <el-table :data="record" height="458" border highlight-current-row>
                                <el-table-column prop="name" label="名称" width="300" sortable>
                                    <template slot-scope="scope">
                                        <div class="zd_name" :tab="scope.row.tab">
                                            <img  :src="scope.row.icon == '' ? 'img/icon/null.png' : scope.row.icon">
                                            <span>{{scope.row.name}}</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="cputime" label="CPU时间" width="140" sortable></el-table-column>
                                <el-table-column prop="internet" label="网络" sortable></el-table-column>
                                <el-table-column prop="flow" label="流量" sortable></el-table-column>
                                <el-table-column prop="notice" label="通知" sortable></el-table-column>
                            </el-table>
                        </template>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="启动项" name="5">
                    <div class="start">
                        <template>
                            <p class="mini_title">上次 BIOS 所用时间： 8.2 秒。</p>
                            <el-table :data="start" height="458" border highlight-current-row>
                                <el-table-column prop="name" label="名称" width="300" sortable>
                                    <template slot-scope="scope">
                                        <div class="zd_name" :tab="scope.row.tab">
                                            <img  :src="scope.row.icon == '' ? 'img/icon/null.png' : scope.row.icon">
                                            <span>{{scope.row.name}}</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="issuer" label="发布者" width="200" sortable></el-table-column>
                                <el-table-column prop="effect" label="启动影响" width="220" sortable></el-table-column>
                                <el-table-column prop="state" label="状态" sortable>
                                    <template slot-scope="scope">
                                        <el-switch v-model="scope.row.state" active-color="#1E6CFA" inactive-color="#CCCCCC"></el-switch>
                                    </template>
                                </el-table-column>

                            </el-table>
                        </template>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="详细信息" name="6">
                    <div class="start">
                        <template>
                            <el-table :data="explicit" height="458" border highlight-current-row>
                                <el-table-column prop="name" label="名称" width="180" sortable>
                                    <template slot-scope="scope">
                                        <div class="zd_name" :tab="scope.row.tab">
                                            <img  :src="scope.row.icon == '' ? 'img/icon/null.png' : scope.row.icon">
                                            <span>{{scope.row.name}}</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="pid" label="PID" width="70" sortable></el-table-column>
                                <el-table-column prop="state" label="状态" sortable></el-table-column>
                                <el-table-column prop="user" label="用户名" width="100" sortable></el-table-column>
                                <el-table-column prop="ram" label="内存" width="80" sortable></el-table-column>
                                <el-table-column prop="structure" label="体制结构" width="100" sortable></el-table-column>
                                <el-table-column prop="describe" label="描述" width="220" sortable></el-table-column>
                            </el-table>
                        </template>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="关于" name="7">
                    <div class="about">
                        <img src="img/qr.gif" alt="" height="230px"><br><br><br>
                        <h3>开源说明</h3>
                        <p>
                            由于个人觉得Windows的任务管理器不是特别美观，所以突发奇想搞了个概念版的任务管理器，由于个人精力有限，所以只弄了一个半成品，剩下的得等下次更新，如果发现有bug也欢迎各位指出修复~
                            <br>Gitee连接：<a href="https://gitee.com/HUIB6/conceptual-task-manager" target="_blank">https://gitee.com/HUIB6/conceptual-task-manager</a>。<br><br>
                            这个任务管理器主要用了易语言、miniblink、JQuery、Vue及Element来开发。<br>
                            源码仅为界面展示，暂时还没有实际功能。
                        </p>

                        <h3>使用模块</h3>
                        <p>
                            - 精易模块v10.0.0.ec<br>
                            - miniblink.ec<br>
                            - JQuery.js<br>
                            - Vue.js<br>
                            - Node.dll
                        </p>

                        <h3>交流讨论</h3>
                        <a href="https://gitee.com/HUIB6/conceptual-task-manager" target="_blank"><el-button size="medium" type="primary">Gitee仓库</el-button></a>
                        <a href="https://qm.qq.com/cgi-bin/qm/qr?k=wtFY6aHGN3xm1e87I4KxlMWJJ17aUX_-&jump_from=webapi" target="_blank"><el-button size="medium" type="primary">QQ交流群①群</el-button></a>
                        <a href="https://qm.qq.com/cgi-bin/qm/qr?k=UURpgV6k-fS02zasi5gKIuZeAC8piV48&jump_from=webapi" target="_blank"><el-button size="medium" type="primary">QQ交流群②群</el-button></a>
                        
                        <br><br><br><br>
                    </div>
                    
                </el-tab-pane>
            </el-tabs>
        </nav>
    </div>

    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="temp/up_service.js"></script>
</body>

</html>

